<template>
  <div class="heipMsg">
    <div class="newsCentent">
      <el-row :gutter="20">
        <el-col :span="14">
          <el-image
            v-for="(item, index) in dataForm.img"
            :key="index"
            :src="getItemPhoto(item)"
            class="el-upload--picture-card mr20"
            v-image-preview
          ></el-image>
        </el-col>
        <el-col :span="10">
          <div>
            {{ dataForm.content }}
          </div>
        </el-col>
      </el-row>
    </div>
    <el-divider></el-divider>
    <div class="newsList">
      <div
        class="news_for"
        v-for="(item, index) in dataForm.contentArray"
        :key="index"
      >
        <div class="titleRight" v-if="item.type == 0">
          <p class="ownMsg">我</p>
          <span class="text_Msg"
            >{{ item.content }}
            <span v-if="item.time" class="msgTime">{{
              $format(item.time)
            }}</span>
          </span>
        </div>
        <div class="titleLeft" v-if="item.type == 1">
          <p class="userMsg">用户</p>
          <span class="text_Msg"
            >{{ item.content
            }}<span v-if="item.time" class="msgTime">{{
              $format(item.time)
            }}</span></span
          >
        </div>
      </div>
    </div>
    <div class="replys">
      <el-input
        class="paperview-input-text"
        type="textarea"
        :rows="4"
        placeholder="请输入回复内容"
        v-model="content"
      >
      </el-input>
      <span class="btns"
        ><el-button type="primary" @click="handleGo">提交</el-button></span
      >
    </div>
  </div>
</template>

<script>
export default {
  props: {
    /* 表单数据 */
    dataForms: {
      type: Object,
      default: {},
      //   default: function(){
      //      return {}
      //   },
    },
  },
  data() {
    return {
      dataForm: {},
      content: "",
      // 默认图片
      imgs: require("@/assets/imgs/houtai/wutu.png"),
    };
  },
  mounted() {
    this.dataForm = JSON.parse(JSON.stringify(this.dataForms )) 
    if (this.dataForm.propertyRead === 2) {
      this.read(this.dataForm._id);
    }
  },

  methods: {
    getItemPhoto(id) {
      var url = this.global.baseUrlImage + "avatar/" + id;
      return url;
    },
    handleGo() {
      if (this.content && this.content.length > 0) {
        let params = {
          _id: this.dataForm._id,
          content: {
            content: this.content,
            type: 0,
            time: new Date().getTime(),
            userName: JSON.parse(sessionStorage.getItem("userInfo")).name,
          },
          dbName: "community_wish",
        };

        this.$api.wxNotic.updateContentArray(params).then((res) => {
          if (res.code == 0) {
            var message = {
              content: this.content,
              type: 0,
            };
            if(!this.dataForm.contentArray) this.dataForm.contentArray=[];
            this.dataForm.contentArray.push(message);
            this.$emit("refresh");
            this.content = "";
          } else {
            this.$message({
              message: "操作失败, " + res.msg,
              type: "error",
            });
          }
        });
        //   });
      } else {
        this.$message({
          message: "内容不能为空",
          type: "none",
        });
      }
    },
    read(id) {
      this.$api.wxNotic
        .updateRead({ _id: id, dbName: "community_wish" })
        .then((res) => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.newsCentent {
  height: 150px;
}
.heipMsg {
  height: 600px;
  // background: aqua;
}
.newsList {
  width: 100%;
  height: 320px;
  overflow-y: auto;
}
::-webkit-scrollbar {
  width: 2px;
}
::-webkit-scrollbar-thumb {
  background: rgb(233, 233, 233);
}
.replys {
  height: 60px;
  border-top: 1px solid rgb(192, 192, 192);
  position: relative;
}
.btns {
  position: absolute;
  bottom: 0;
  right: 0;
}
.paperview-input-text >>> .el-textarea__inner {
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;

  border: 0px; //改成0，边框就消失了！
}
.titleRight {
  display: flex;
  flex-direction: row-reverse;
}
.titleLeft {
  display: flex;
  flex-direction: row;
}
.ownMsg,
.userMsg {
  display: block;
}
.ownMsg {
  margin-left: 10px;
}
.userMsg {
  margin-right: 10px;
}
.text_Msg {
  display: block;
  white-space: normal;
  background: rgb(248, 248, 248);
  padding: 10px;
  box-sizing: border-box;
}
.titleRight,
.titleLeft {
  margin-bottom: 20px;
}
.msgTime {
  display: inline-block;
  margin: 0 10px;
}
</style>